<template>
  <van-collapse class="vanCollapse" v-model="activeNames">
    <van-collapse-item title="最近播放" name="4">
      <div v-if="UserRecentPlayList.length">
        <div class="recent-play-item-box" v-for="(item,index) in UserRecentPlayList" @click="songCickAction(index)" :key="item.id">
          <img class="img" :src="item.al.picUrl+'?param=100y100'" alt="">
          <div class="context-box">
            <h5 class="name">{{item.name}}</h5>
            <P class="alia">{{item.al.name}}</P>
          </div>
        </div>
      </div>
      <van-empty v-else class="custom-image" image-size="20" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="登录后查看" />
    </van-collapse-item>
    <van-collapse-item title="我的音乐" name="1">
      <van-empty class="custom-image" image-size="20" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="内容为空" />
    </van-collapse-item>
    <van-collapse-item title="我的收藏" name="2">
      <van-empty class="custom-image" image-size="20" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="内容为空" />
    </van-collapse-item>
    <van-collapse-item title="我的电台" name="3">
      <van-empty class="custom-image" image-size="20" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="内容为空" />
    </van-collapse-item>
  </van-collapse>
</template>
<script  type='module'>
export default {
  name: 'MyFooter',
  props: {
    UserRecentPlayList: Array
  },
  data () {
    return {
      activeNames: []
    }
  },
  methods: {
    // 点击播放音乐
    songCickAction (index) {
      // 将用户点击的歌曲列表下标和当前的歌曲列表传递给store
      this.$store.commit({
        type: 'player/selectSongByIndex', // commit的事件名称
        index: index, // 参数，点击的下标
        list: this.UserRecentPlayList// 参数，整个歌单列表
      })
    }
  }

}
</script>
<style lang="less" scoped>
.vanCollapse {
  position: relative;
  top: -80px;
  .recent-play-item-box {
    display: flex;
    margin-bottom: 10px;
    .img {
      width: 50px;
      height: 50px;
      border-radius: 8px;
    }
    .context-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
      padding-left: 15px;
      overflow: hidden;
      .name {
        font-size: 16px;
        line-height: 30px;
        font-weight: 500;
        color: #303133;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
      }
      .alia {
        font-size: 14px;
        // font-weight: 500;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
      }
    }
  }
}
</style>
